import React from 'react'

import {
    BrowserRouter,
    Route,
    Switch,
    Redirect,
} from 'react-router-dom'

// 这里是路由的配置。
const routes = [
    {
        path: '/example',
        exact: true,
        component: React.lazy(() => import('@/pages/example/Example')),
    },
    {
        path: '/home',
        exact: false,
        component: React.lazy(() => import('@/pages/home/Home.jsx')),
        routes: [
            {
                path: '/home/profile',
                exact: true,
                component: React.lazy(() => import('@/pages/home/profile/Profile.jsx')),
            }
        ]
    }
];

//用于遍历路由的配置
const RouterView = (route) => (
    <Route exact={route.exact} path={route.path} render={props => (
        <route.component {...props} routes={route.routes}/>
    )}/>
);

//为了响应异步加载
const Router = (props) => (
    <BrowserRouter { ...props }>
        <React.Suspense fallback={<div>loading</div>}>
            { props.children }
        </React.Suspense>
    </BrowserRouter>
);

export {
    //react-router 自带的
    BrowserRouter,
    Route,
    Switch,
    Redirect,

    //重写的组件
    RouterView,
    Router,
    routes,
}
